<template>
  <div class="header">
    <ul class="category-list">
      <li @click="select(0)" :class="{active:isActive === 0}">全部</li>
      <li @click="select(item.id)" 
      class="category-item" 
      :class="{active:isActive === item.id}" 
      v-for="(item,index) in categories" 
      :key="index"
      >{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    name:'MachineHeader',
    data(){
      return {
        isActive:0,
        categories:[]
      }
    },
    async created(){
      const res = await axios.get('/user/category')
      this.categories = res.data.data
    }
    ,
    methods:{
      select(categoryId){
        this.isActive = categoryId
        // 进行分页查询获取商品列表
        this.$store.dispatch('getGoodsList',{categoryId: categoryId === 0 ? '': categoryId,pageNo:1})
        // 将当前分类的id传递给MachineGoods组件
        this.$bus.$emit('getCategoryId',categoryId)
        // 将MachineGoods组件的 isActive 属性修改为0
        this.$bus.$emit('defaultActive',0)
        // 等待定时器的触发回到全部页
        // this.$bus.$on('backAll',(value) => this.isActive = value)
      },
    }
  }
</script>

<style scoped>
  .header .category-list .active{
    background-color: #eaeaea;
    color: #000;
  }
  .header .category-list{
    display: flex;
  }
  .header .category-list li{
    margin-left: 5px;
    padding: 8px 16px;
    font-size: 20px;
    background-color: #cf6722;
    color: #fff;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
  }
</style>
